<template>
  <div class="animated fadeIn">
    <!-- 运单已完成 2018/3/5 11:15 -->
    <Row>
      <i-col :md="24">

        <div>
          <!--
          <div id="container" style="margin-bottom:10px;">

              <Button type="primary" size="large" icon="ios-cloud-upload-outline" id='pickfiles' @click="qiniu_upload" style="padding-bottom:5px;">上传文件</Button>
              <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                  <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                  <span v-if="progresscount===100">上传成功</span>
                  <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                  <span v-if="progresstatus==='wrong'">上传失败</span>
                  <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
              </Progress>
          </div>
        -->

          <div style="position:relative;">

            <Table :columns="columns7" :data="main_order_list" ref="table" border></Table>

            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <Page :total="this.main_order_list.length" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px"></Page>
          <!--
          <Button type="primary" size="large" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出原始数据
          </Button>
          <Button type="primary" size="large" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
            导出排序和过滤后的数据
          </Button>
          -->
        </div>


      </i-col>

      <i-col :md="12">

      </i-col>

    </Row>

    <Modal v-model="detailModel" title="运单详情">
      <Table :columns="column1" :data="detailData"></Table>
    </Modal>

  </div>
</template>
<script>
  import { getMainOrder, getOrderDetail } from '@api/backEnd/mainOrder'

  export default {
    name: 'orderDone',
    data () {
      return {
        detailModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        main_order_list: [],
        detailData: [],
        lodding: false,
        list_loadding: false,
        columns7: [
          {
            title: '联运单号',
            key: 'orderNo',
            ellipsis: 'false',
            fixed: 'left',
            width: 200,
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '空车入线时间',
            ellipsis: 'false',
            key: 'emptyTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.emptyTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '起始站',
            ellipsis: 'false',
            key: 'startStationName',
            width: 100,
            render: (h, params) => {
              let thisdata = params.row.startStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '起始站出发时间',
            ellipsis: 'false',
            key: 'startStationTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.startStationTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '终点站',
            ellipsis: 'false',
            key: 'endStationName',
            width: 100,
            render: (h, params) => {
              let thisdata = params.row.endStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '到达终点站时间',
            ellipsis: 'false',
            key: 'endStationTime',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.endStationTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '托运人',
            ellipsis: 'false',
            key: 'shipper',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.shipper
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            width: 150,
            render: (h, params) => {
              let thisdata = params.row.receiver
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 200,
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let thisdata = params.row.createTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            ellipsis: 'true',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      this.detailModel = true
                      getOrderDetail(params.row).then(res => {
                        if (res.data.isSuccess === 1) {
                          this.detailData = res.data.data.sub
                        }
                      })
                    }
                  }
                }, '查看详情')
              ])
            }
          }
        ],
        column1: [
          {
            title: '联运单号',
            ellipsis: 'false',
            key: 'mainOrderNo',
            render: (h, params) => {
              let thisdata = params.row.mainOrderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '联运子单号',
            ellipsis: 'false',
            key: 'orderNo',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '车号',
            ellipsis: 'false',
            key: 'trainNumber',
            render: (h, params) => {
              let thisdata = params.row.trainNumber
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '车队名称',
            ellipsis: 'false',
            key: 'fleetName',
            render: (h, params) => {
              let thisdata = params.row.fleetName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '司机名称',
            ellipsis: 'false',
            key: 'driverName',
            render: (h, params) => {
              let thisdata = params.row.driverName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '托运人',
            ellipsis: 'false',
            key: 'shipper',
            render: (h, params) => {
              let thisdata = params.row.shipper
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            render: (h, params) => {
              let thisdata = params.row.receiver
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }
        ]
      }
    },
    methods: {
      remove (index) {
        this.video_list.splice(index, 1)
      },
      //      qiniu_upload () {
      //        uploader.start();
      //      },
      setInitPage (page) {
        const status = 6
        const param = { status, page }
        getMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let mainOrderList = res.data.data.list
            mainOrderList.sort(function (p1, p2) {
              return new Date(p1.createTime).getTime() - new Date(p2.createTime).getTime()
            })
            this.main_order_list = mainOrderList.reverse()
            this.pageTotal = res.data.data.total
          } else {
            this.pageTotal = 0
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    }
  }
</script>
